<template>
<div>
    <div class="search-area">
         <div class="search-box">
             <input class="roundRectangle" />
             <div class="icon-search"> <img src="@/assets/image/index/nav_icon_search.png" alt=""></div>
             <div class="text-search"><p>搜索</p></div>
         </div>
        <div  class="icon-user" ><img src="@/assets/image/index/user.png" alt="" ></div>
        <div class="icon-close" @click="showTab"><img src="@/assets/image/index/icon_close.png" alt=""></div>
    </div>
    
</div>
     
</template>

<script>
    export default {
        name:"search",
        data() {
            return {

            };
        },
        components:{

        },
        async asyncData({$http}) {
            
        },
        mounted() {

        },
        methods: {
            showTab(){   
                this.$emit('showTab')
            }
        }
    }
</script>

<style scoped lang="less">

.search-area{
    width: 4.86rem;
    height: 0.55rem;
    overflow: hidden;
    position: relative;
}
.search-box{
    position: relative;
    height: 0.5rem;
    width: 3.44rem;
    margin-left: 0.27rem;
    .roundRectangle{
    position: absolute;
    left: 0;
    // text-indent:0.5rem;
    padding-left: 0.55rem;
    padding-right: 0.7rem;
    color: white;
    outline:none;
    font-size: 0.2rem;
    height: 0.5rem;
    width: 3.44rem;
    border-width: 0.01rem;
    border-style: solid;
    border-radius: 0.25rem;
    border-color: #FDF8FF;
    background-color: transparent;
}
    .icon-search{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.15rem;
        width: 0.35rem;
        height: 0.35rem;
    }
    .text-search{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right:0.2rem;
        font-size: 0.12rem;
        color: #CECED0;
        p{
            line-height: 0.12rem;
        }  
    }
}


.icon-user{  
    position: abosolute;
    position: absolute;
    right: 0.68rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.35rem;
    height: 0.35rem;    
}
.icon-close{
     position: absolute;
     top: 50%;
     right: 0;
     transform: translateY(-50%);
     width: 0.32rem;
     height: 0.32rem;
     margin-left: 0.36rem;
}

</style>